<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021/11/30
  Time: 11:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页面</title>
    <meta charset="utf-8">
    <title>Bootstrap 基本的基于标签的导航实例</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.25/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.25/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.25/examples/navbar-static-top/navbar-static-top.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.25/assets/js/ie-emulation-modes-warning.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"></head>
    <style type="text/css">
        #personal{
            width: 65px;
            position: fixed;
            right: 6px;
            top: 300px;
        }
        body{
            height: 1000px;
        }
    </style>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">订单管理系统</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav" id="navul">
            <li role="presentation" class="active" id="home">
                <a href="${pageContext.request.contextPath}/user/billDo/billList" target="iframe">首页</a>
            </li>
            <c:if test="${sessionScope.userSession.userRole != 3 and sessionScope.userSession.userRole != 0}">
                <li role="presentation" id="proList">
                    <a href="${pageContext.request.contextPath}/user/providerDo/providerPage" target="iframe">供应商管理</a>
                </li>
                <li role="presentation" id="userList">
                    <a href="${pageContext.request.contextPath}/user/userDo/queryPage" target="iframe">用户管理</a>
                </li>
            </c:if>
        </ul>
        <ul class="nav navbar-nav navbar-right">
<%--            <li><a href="javascript:void(0)">Default</a></li>--%>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-user"></span><span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li onclick="CheckModalContent(${sessionScope.userSession.id})"><a href="javascript:void(0)">个人信息</a></li>
                    <li><a href="${pageContext.request.contextPath}/user/userDo/modifyPage?id=${sessionScope.userSession.id}&Jump='main'">修改信息</a></li>
<%--                    实例：https://v3.bootcss.com/examples/navbar-fixed-top/--%>
<%--                    <li role="separator" class="divider"></li>--%>
<%--                    <li class="dropdown-header">Nav header</li>--%>
<%--                    <li><a href="#">Separated link</a></li>--%>
<%--                    <li><a href="#">One more separated link</a></li>--%>
                </ul>
            </li>
            <li><a href="${pageContext.request.contextPath}/user/logout.do">LogOut</a></li>
        </ul>
    </div>
</nav>

<div class="embed-responsive embed-responsive-16by9" style="height: 800px">
    <iframe class="embed-responsive-item" id="iframe" name="iframe" src="${pageContext.request.contextPath}/user/billDo/billList"></iframe>
</div>

<%@include file="viewuser.jsp"%>

<div id="personal">
    <ul class="nav navbar-nav" >
        <li onclick="CheckModalContent(${sessionScope.userSession.id})"><a href="javascript:void(0)"><span class="glyphicon glyphicon-user"></span>&emsp;个人信息</a></li>
        <li><a href="${pageContext.request.contextPath}/user/userDo/modifyPage?id=${sessionScope.userSession.id}&Jump='main'"><span class="glyphicon glyphicon-wrench"></span>&emsp;信息修改</a></li>
<%--        <li><a href="javascript:void(0)"><span class="glyphicon glyphicon-user"></span>&emsp;个人信息</a></li>--%>
    </ul>
</div>



<script src="${pageContext.request.contextPath}/webjars/jquery/3.6.0/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script>
    $(function () {
        $('#navul').on("click","li",function () {
            let aText = $(this).find("a").html();
            console.log(aText);
            $("#navul > li").removeClass("active");
            if (aText.search("Home")!==-1){
                $("#home").addClass("active");
            }else if(aText.search("供应商管理")!==-1){
                $("#proList").addClass("active");
            }else if(aText.search("用户管理")!==-1){
                $("#userList").addClass("active");
            }
        })
    })
    
    let onResize = function(){
        $("body").css("padding-top",$(".navbar").height());
    };
    $(window).resize(onResize);
    $(function(){
        onResize();
    });

    // 查看信息模态框的内容
    let CheckModalContent = function (id) {
        $.ajax({
            url: "${pageContext.request.contextPath}/user/userDo/check",
            type: "POST",
            data: {
                id: id
            },
            success: function (data) {
                let user =data;
                let gender = user.gender;
                if(user.gender === 1){gender = "男"}
                else{gender = "女"}
                console.log(user.birthday);
                let html =  "<p><strong>用户编号：</strong><span>"+user.userCode+"</span></p>"+
                    "<p><strong>用户名称：</strong><span>"+user.userName+"</span></p>"+
                    "<p><strong>用户性别：</strong>"+
                    "<span>"+gender+"</span>"+
                    "</p>"+
                    "<p><strong>出生日期：</strong>"+
                    "<span>"+user.birthday+"</span>"+
                    "</p>"+
                    "<p><strong>用户电话：</strong><span>"+user.phone+"</span></p>"+
                    "<p><strong>用户地址：</strong><span>"+user.address+"</span></p>"+
                    "<p><strong>用户角色：</strong><span>"+user.userRoleName+"</span></p>";
                $('#checkModel').html(html);
            }
        })
        $("#CheckView").modal({
            keyboard : false
        });
    }

</script>

</body>
</html>
